{% extends "root/templates/base.html" %}

{% block content %}
<h2>Create Field Set</h2>
<div class="info">
  A field set is an ordered collection of fields that contains information
  about a person. You can choose the names and properties for a new
  field set here. <b>NB: You currently cannot edit or delete a field set
  once created because it screws up any entries associated with this
  field set, so be careful before you hit submit!</b>
</div>

<form method="POST"><fieldset>
  <div class="fieldset_item">
    Name : <input type="text" name="name" size="75"/>
  </div>
  <div id="new_fields">
  </div>
  <div class="fieldset_item">
    <a href="#" id="add_field_link">[ Add Field ]</a>
    <input type="submit" value="Create" />
  </div>
</fieldset></form>

<script type="text/javascript">
  Sqrl.field_opts = ['<select name="field_type">']
  {% for type in field_types %}
    Sqrl.field_opts.push('<option value="{{ type.0 }}">{{ type.1.verbose_type }}</option>')
  {% endfor %}
  Sqrl.field_opts.push('</select>&nbsp;<input type="text" name="field_name" size="60"/>')
  Sqrl.field_opts = Sqrl.field_opts.join('')
  
  Sqrl.field_count = 0
  Sqrl.add_field = function() {
    field_name = 'field_' + Sqrl.field_count
    Sqrl.field_count += 1
    app = ['<div class="fieldset_item" id="', field_name, '">']
    app.push(Sqrl.field_opts)
    app.push(' <a href="#">[ Remove ]</a> ')
    app.push('</div>')
    $('#new_fields').append(app.join(''))
    Sqrl.add_field_remove(field_name)
  }
  
  Sqrl.add_field_remove = function(field_name) {
    field_name = '#' + field_name
    $(field_name + ' a').click(function(){$(field_name).remove()})
  }
  
  $('#add_field_link').click(function(){ Sqrl.add_field() })
  
  Sqrl.add_field()
  Sqrl.add_field()
  Sqrl.add_field()

</script>

{% endblock %}